<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <f:view>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Pacientes</title>
        <link type="text/css" href="../common/css/redmond/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
        <link type="text/css" href="../common/css/administrar.css" rel="stylesheet" />
	<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../common/js/jquery.ui.all.js"></script>
	<script type="text/javascript" src="../common/js/jquery.layout.js"></script>
        <script type="text/javascript" src="../common/js/jquery-ui-1.8.6.custom.min.js"></script>
        <script type="text/javascript" src="../common/js/calendarioui-es.js"></script>
        <script type="text/javascript" src="../common/js/jquery.dateentry.js"></script>
        <script type="text/javascript" src="../common/js/planeacionpyp.js"></script>
        <script type="text/javascript" src="../common/js/jquery.tablesorter.min.js"></script>
        <script type="text/javascript" src="../common/js/jquery.metadata.js"></script>
        <script type="text/javascript" src="../common/js/jquery.tablesorter.pager.js"></script>
        <script type="text/javascript" src="../common/js/jquery.validate.js"></script>
        <script type="text/javascript" src="../common/js/jquery.zebra.js"></script>
        <script type="text/javascript" src="../common/js/ui.panel.js"></script>
        <script type="text/javascript" src="../common/js/jquery.qtip-1.0.0-rc3.js"></script>
        <style type="text/css" title="currentStyle">
			@import "../common/css/demo_page.css";			
                        @import "../common/css/demo_table_jui.css";
		</style>
        <script type="text/javascript" language="javascript" src="../common/js/jquery.dataTables.js"></script>

        <script>
           var asInitVals = new Array();

            $(document).ready(function() {
			var oTable = $('#example').dataTable( {
                                        "sPaginationType": "full_numbers",
                                        "bJQueryUI": true,
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "/salus/PacienteListaServlet",
                                        "oLanguage": {
                                                        "sLengthMenu": "Mostrar _MENU_ registros por Pagina",
                                                        "sZeroRecords": "Opps - No se encontraron datos",
                                                        "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                                                        "sInfoEmpty": "Mostrando 0 a 0 de 0 registros",
                                                        "sInfoFiltered": "(filtered from _MAX_ total records)"
                                                    }

				} );

                                $("tfoot input").keyup( function () {
                                        /* Filter on the column (the index) of this element */
                                        oTable.fnFilter( this.value, $("tfoot input").index(this) );
                                } );

                               $("tfoot input").each( function (i) {
                                        asInitVals[i] = this.value;
                                } );

                                $("tfoot input").focus( function () {
                                        if ( this.className == "search_init" )
                                        {
                                                this.className = "";
                                                this.value = "";
                                        }
                                } );

                                $("tfoot input").blur( function (i) {
                                        if ( this.value == "" )
                                        {
                                                this.className = "search_init";
                                                this.value = asInitVals[$("tfoot input").index(this)];
                                        }
                                } );                               
                                $("#example tbody").dblclick(function(event) {
                                        $(oTable.fnSettings().aoData).each(function (){
                                                $(this.nTr).removeClass('row_selected');
                                        });
                                        $(event.target.parentNode).addClass('row_selected');
                                        var anSelected = fnGetSelected( oTable );                                        
                                        var dato=anSelected[0].cells;                                        
                                        planear(dato[0].innerHTML,dato[1].innerHTML)
                               });
                                /* Add a click handler for the delete row */
                                $('#delete').click( function() {
                                        var anSelected = fnGetSelected( oTable );
                                        //oTable.fnDeleteRow( anSelected[0] );
                                        var dato=anSelected[0].cells;
                                        alert(dato[0].innerHTML);
                                } );
			} );
                        function fnGetSelected( oTableLocal )
                        {
                                var aReturn = new Array();
                                var aTrs = oTableLocal.fnGetNodes();

                                for ( var i=0 ; i &lt; aTrs.length ; i++ )
                                {
                                        if ( $(aTrs[i]).hasClass('row_selected') )
                                        {
                                                aReturn.push( aTrs[i] );
                                        }
                                }
                                return aReturn;
                        }

        </script>
        
    </head>
        <body>
            <div style="width: 100%">
                
                <h3 style="text-align: center" class="ui-widget-header">Planeaci&oacute;n PYP</h3>  
              
                <table width="100%">
                    <tr>
                        <td align="left">                                  
                        </td>
                        <td align="right">
                            <button id="ayudaBtn">Ayuda</button>               
                        </td>
                    </tr>
                </table>          
                <div class="tooltips"></div> 
                
                 <!--DATA TABLE-->                
                <div id="dynamic">
                    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                        <thead>
                            <tr>
                                <th width="5%">Sec</th>
                                <th width="10%">Identificac&oacute;n</th>
                                <th width="20%">Primer Nombre</th>
                                <th width="20%">Segundo Nombre</th>
                                <th width="20%">Primer Apellido</th>
                                <th width="20%">Segundo Apellido</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="3" class="dataTables_empty">Loading data from server</td>
                            </tr>
                        </tbody>

                        <tfoot>
                            <tr>                                
                                <th><input size="20" type="hidden" name="search_id" value="Secuencial" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_numero" value="Numero" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_nombre1" value="Primer Nombre" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_nombre2" value="Segundo Nombre" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_apellido1" value="Primer Apellido" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_apellido2" value="Segundo Apellido" class="search_init" /></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                
                
                
                <!--
            <div id="adm_paciente">
                <h3 style="text-align: center" class="ui-widget-header">Planeaci&oacute;n PYP</h3>                
                <div style="width: 100%" id="buscador-form">
                    <table border="0">
                        <tr valign="top" class="ui-widget-header">
                            <td>Identificaci&oacute;n</td>
                            <td><input type="text" size="16" onkeyup="this.value=this.value.toUpperCase()" id="buscarCod" class="text ui-widget-content ui-corner-all"/></td>
                            <td>Nombre</td>
                            <td><input type="text" size="20" onkeyup="this.value=this.value.toUpperCase()" id="buscarDes" class="text ui-widget-content ui-corner-all"/></td>
                            <td>Apellido</td>
                            <td><input type="text" size="20" onkeyup="this.value=this.value.toUpperCase()" id="buscarDes1" class="text ui-widget-content ui-corner-all"/></td>
                            <td><button id="buscarBtn">Buscar</button></td>
                            <td><button id="clearBtn">Limpiar</button></td>
                        </tr>
                    </table>
                </div>


                <table width="100%" id="tabla-paciente" class="lista" >
                    <thead>
                        <tr>
                            <th>Identificaci&oacute;n</th>
                            <th>Nombre</th>
                            <th class="{sorter: false}">Opciones</th>
                        </tr>
                    </thead>
                    <tbody id="tabla-paciente-body">

                    </tbody>
                </table>
                <div id="pager" class="pager">
                    <form>
                        <table>
                            <tr class="ui-widget-header">
                                <td>
                                    <img src="../common/img/first1.png" class="first"/>
                                </td>
                                <td>
                                    <img src="../common/img/prev1.png" class="prev"/>
                                </td>
                                <td>
                                    <input type="text" size="8" class="pagedisplay text ui-widget-content ui-corner-all"/>
                                </td>
                                <td>
                                    <img src="../common/img/next1.png" class="next"/>
                                </td>
                                <td>
                                    <img src="../common/img/last1.png" class="last"/>
                                </td>
                                <td>
                                    <select class="pagesize text ui-widget-content">
                                        <option selected="selected"  value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option  value="40">40</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
                -->

            </div>


            <div id="paciente-form" title="Info" style="display: none">
                    <!--<form id="formPaciente">-->
                        <input type="hidden" id="op"/>

                        <div id="panelPlanPaciente">
                            <h3 align="center">Informaci&oacute;n General</h3>
                            <table width="100%">
                            <tr class="ui-widget-header">
                                <td>Id</td>
                                <td>C&oacute;digo</td>
                                <td colspan="2">Tipo Ide</td>
                                
                            </tr>

                            <tr>                                
                                <td><input type="text" size="15" name="id" id="id" readonly ="true" class="ui-widget-content" /></td>
                                <td><input type="text" readonly ="true"  size="15" name="identificacion" id="identificacion" value="" class="ui-widget-content" /></td>
                                <td colspan="2"><select readonly ="true"  id="id_tipo_ide" name="id_tipo_ide" class="ui-widget-content"></select></td>
                                
                            </tr>
                            <tr class="ui-widget-header">
                                <td>Primer Nombre</td>
                                <td>Segundo Nombre</td>
                                <td>Primer Apellido</td>
                                <td>Segundo Apellido</td>
                            </tr>
                            <tr>
                                
                                <td>
                                    <input type="text" readonly ="true"  size="15" name="nombre1" id="nombre1" value="" class="ui-widget-content" />
                                </td>                                
                                <td>
                                    <input type="text" readonly ="true"  size="15" name="nombre2" id="nombre2" value="" class="ui-widget-content" />
                                </td>
                                <td>
                                    <input type="text" readonly ="true"  size="15" name="apellido1" id="apellido1" value="" class="ui-widget-content" />
                                </td>
                                
                                <td>
                                    <input type="text" readonly ="true"  size="15" name="apellido2" id="apellido2" value="" class="ui-widget-content" />
                                </td>
                            </tr>

                            <tr class="ui-widget-header">
                                <td>Fecha Nacimiento</td>
                                <td>Sexo</td>
                                <td>Departamento</td>
                                <td>MUncipio</td>

                                
                            </tr>

                            <tr>
                                <td>
                                    <input type="text" readonly ="true"  id="fecha_nac" name="fecha_nac" class="ui-widget-content"/>
                                </td>

                                <td>
                                    <select id="sexo" readonly ="true"  name="sexo" class="text ui-widget-content">
                                        <option value="1">MASCULINO</option>
                                        <option value="2">FEMENINO</option>
                                    </select>
                                </td>
                                <td>
                                    <select id="id_depto" readonly ="true"  name="id_depto" class="ui-widget-content"></select>
                                </td>
                                
                                <td>
                                    <select id="id_mupio" readonly ="true"  name="id_mupio" class="ui-widget-content"></select>
                                </td>
                            </tr>

                            <tr class="ui-widget-header">
                                <td>Zona</td>
                                <td>Fecha Af EPS</td>
                                <td>Direcci&oacute;n</td>
                                <td>Tel&eacute;fono</td>
                            </tr>

                            <tr>
                                <td>
                                     <select id="zona" readonly ="true"  name="zona" class="ui-widget-content">
                                        <option value="1">URBANA</option>
                                        <option value="2">RURAL</option>
                                    </select>
                                </td>                                
                                <td>
                                   <input type="text" readonly ="true"  id="fecha_eps" name="fecha_eps" class="ui-widget-content"/>
                                   <input type="hidden" id="id_entidad" name="id_entidad"/>
                                </td>
                                 <td>
                                    <input type="text" readonly ="true"  size="15" name="direccion" id="direccion" value="" class="ui-widget-content" />
                                </td>
                                <td>
                                    <input type="text" readonly ="true"  size="15" name="telefono" id="telefono" value="" class="ui-widget-content" />
                                </td>
                                
                            </tr>                           
                        </table>


                        </div>

                        <center>
                            <button id="progPacienteBtn">Programar Paciente</button>
                        </center>

                        <div id="panelPlaneacion">
                            <h3 align="center">Planeaci&oacute;n</h3>
                            <div>
                                <div id="lista-planeacion"></div>
                            </div>
                        </div>

<!--
                    </form>
-->
            </div>
            
            <div class="qtip qtip-stylename">
               <div class="qtip-tip" rel="cornerValue"></div>
               <div class="qtip-wrapper">
                  <div class="qtip-borderTop"></div>
                  <div class="qtip-contentWrapper">
                     <div class="qtip-title">
                        <div class="qtip-button"></div>
                     </div>
                     <div class="qtip-content"></div>
                  </div>
                  <div class="qtip-borderBottom"></div>
               </div>
            </div>


        </body>
         </f:view>
</html>
